<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ include file="/admin/inc/tag.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="css/Diy_index.css" rel="stylesheet" type="text/css" />
<LINK rel=stylesheet type=text/css href="/pc/zj/css/proFilter.css">
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/base.js"></script>
<title>装机</title>
<script type="text/javascript">
	$(document).ready(function() {
		// 购买按钮
		$("#buy_btn").click(function () {
			if(checkForm()) {
				$("#buy_form").attr("action", "/pc/product/saveProductConfig.do?type=1");
				$("#buy_form").submit();
			}
		});
	});
	
	// 获取品牌列表
	function getProductBrand(typeId, typeName) {
		typeName = unescape(typeName);
		$("#type_name").html("<div class='listTitle'>" + typeName + "</div>");
		if(typeId > -999) {
			base.req("/pc/product/getProductBrand.do?typeId=" + typeId, "", function(result) {
				var arr = base.json(result);
				var html = "";
				for(var i=0; i<arr.length; i++) {
					var brandName = arr[i].product_brand_name;
					html += "<DD><a href='javascript:void(0)' onclick='getProductList(\"" + typeId + "\",\"" + typeName 
							+ "\",\"" + escape(brandName) + "\")'>" + brandName + "</a>&nbsp;</dd>";
				}
				$("#brand_list").html(html);
				$("#type_list").html("");
				$("#product_list").html("");
			});
		}else {// 点其他的时候先获取类别列表
			base.req("/pc/product/getProductTypeList.do?","", function(data1) {
				var typeDetail = "";
				var jsonArray1 = base.json(data1);
				for(var i=0; i<jsonArray1.length; i++) {
					typeDetail += "<a href='javascript:void(0)' onclick='getProductBrand1(\"" + jsonArray1[i].config_id + "\",\"" 
							+ typeName + "\"," + typeId +")'>" + jsonArray1[i].config_name + "</a>&nbsp;";
				}
				$("#type_list").css("display", "");
				$("#type_list").html(typeDetail);
				$("#product_list").html("");
				$("#brand_list").html("");
			});
		}
	}
	
	// 其他产品获取品牌列表
	function getProductBrand1(typeId, typeName, configId) {
		typeName = unescape(typeName);
		base.req("/pc/product/getProductBrand.do?typeId=" + typeId, "", function(result) {
			var arr = base.json(result);
			var html = "";
			for(var i=0; i<arr.length; i++) {
				var brandName = arr[i].product_brand_name;
				html += "<a href='javascript:void(0)' onclick='getProductList1(\"" + typeId + "\",\"" + escape(brandName) 
						+ "\",\"" + configId + "\")'>" + brandName + "</a>&nbsp;";
			}
			$("#brand_list").html(html);
		});
	}
	
	// 标准配件获取产品列表
	function  getProductList(typeId, typeName, brandName) {
		typeName = unescape(typeName);
		brandName = unescape(brandName);
		if(typeId != null) {
			$("#type_name").html("<div class='listTitle'>" + typeName + "</div>");
			if(typeId > -999) {
				$("#type_list").css("display", "none");
				$("#type_list").html("");
				base.req("/pc/product/getProductList.do?typeId=" + typeId + "&brandName=" + brandName, "", function(data) {
					var jsonArray = base.json(data);
					var productDetail = ""; 
					for(var i=0; i<jsonArray.length; i++) {
						var json = jsonArray[i];
						var productName = escape(json.product_name);
						productDetail += "<li><em class='pic'><img src='" + json.product_pic_url +  "' width='60' height='45'/></em>名字：" + json.product_name + " 价钱："
						+ json.product_price + " <a href='javascript:void(0)' onclick='setProduct(" + json.product_id 
						+ ",\""	+ productName +"\"," + json.product_price + "," 
						+ json.config_id + ")'>添加</a></li>";
					}
					$("#product_list").html(productDetail);
				});
			}
		}
	}
	
	// 其他获取产品列表
	function  getProductList1(typeId, brandName, configId) {
		brandName = unescape(brandName);
		base.req("/pc/product/getProductList.do?typeId=" + typeId + "&brandName=" + brandName, "", function(data) {
			var jsonArray = base.json(data);
			var productDetail = "";
			for(var i=0; i<jsonArray.length; i++) {
				var json = jsonArray[i];
				var productName = escape(json.product_name);
				productDetail += "<li><em class='pic'><img src='" + json.product_pic_url +  "' width='60' height='45'/></em>名字：" + json.product_name + " 价钱：" 
				+ json.product_price + " <a href='javascript:void(0)' onclick='setProduct(" + json.product_id 
				+ ",\""	+ productName +"\"," + json.product_price + "," 
				+ configId + ")'>添加</a></li>";
			}
			$("#product_list").html(productDetail);
		});
	}
	
	function setProduct(id, name, price, type) {
		$("#id_" + type).val(id);
		$("#name_" + type).html(unescape(name));
		$("#count_" + type).html("1");
		$("#price_" + type).html("<input type='text' name='price' value='" + price 
					+ "' size='5' readonly='readonly' style='background:transparent;border:none;'/>");
		$("#oper_" + type).html("<a href='javascript:void(0)' onclick='cancelProduct(" + type + ")'>取消</a>");
		calTotalPrice();
	}
	
	function cancelProduct(type) {
		$("#id_" + type).val("");
		$("#name_" + type).html("");
		$("#count_" + type).html("");
		$("#price_" + type).html("");
		$("#oper_" + type).html("");
		calTotalPrice();
	}
	
	// 计算总的价钱
	function calTotalPrice() {
		var object = $("input[name=price]");
		var totalPrice = 0;
		for(var i=0; i<object.length; i++) {
			var price = object[i].value;
			if(price != "") {
				totalPrice = totalPrice + parseFloat(price);
			}
		}
		$("#allPriceTxt").html(totalPrice);
		
	}
	
	var checkArray = new Array();
	function setCheckArray(id) {
		checkArray[checkArray.length] = id;
	}
	
	// 检查表单数据
	function checkForm() {
		if($("#scheme_customer_name").val() == "") {
			alert("请输入姓名！");
			return false;
		}
		if($("#scheme_customer_mobile").val() == "") {
			alert("请输入手机！");
			return false;
		}
		if($("#scheme_customer_qq").val() == "") {
			alert("请输入QQ！");
			return false;
		}
		
		for(var i=0; i<checkArray.length; i++) {
			var id = checkArray[i];
			var value = $("#" + id).val();
			if(value == null || value == "") {
				alert("*号为必选配置，请您选择完整！");
				return false;
			}
		}
		return true;
	}

</script>
<style type="text/css">
.listTitle {
	text-align: center;
	font-weight: bold;
	font-size: 16px;
	padding-top: 7px;
}
</style>
</head>
<body>
<DIV class=wrapper style="margin:0 auto;">
<DIV class=pc_parts_select>
	<admin:productTypeList name="rows" />
	<UL id=topSubSel class="pc_parts_option clearfix">
		<c:forEach items="${rows}" var="row">
			<li onclick="getProductBrand(${row.config_id},escape('${row.config_name}'));"><span>${row.config_name}</span></li>
		</c:forEach>
	</UL>
</DIV>
	<DIV id=diy_content class=diy_box>
	<form id="buy_form" action="/pc/product/saveProductConfig.do" method="post">
		<DIV class=your_card>
			<H3 class=your_card_hd>装机配置单</H3>
			<DIV class=card_head>
				<TABLE>
					<TBODY>
						<TR>
							<TH class=type>配置</TH>
							<TH class=name>名字</TH>
							<TH class=num>数量</TH>
							<TH class=price>价格</TH>
							<TH>操作</TH>
						</TR>
					</TBODY>
				</TABLE>
			</DIV>
			<UL id=leftSelBox class=card_detail>
				<c:forEach items="${rows}" var="row">
					<li class="leftSubSel"><span class="item">
							${row.config_name} <c:if test="${row.config_is_required == '1'}">
								<em>*</em>
								<script type="text/javascript">
									setCheckArray("id_${row.config_id}");
								</script>
							</c:if>
					</span>
						<TABLE border="1">
							<TBODY>
								<TR>
									<input type="hidden" name="config_id" value="${row.config_id}" />
									<input type="hidden" name="product_id" id="id_${row.config_id}" />
									<input type="hidden" name="config_name" value="${row.config_name}" />
									<TD onclick="getProductBrand(${row.config_id},escape('${row.config_name}'));" class=name id="name_${row.config_id}" style="text-align: center;"></TD>
									<TD onclick="getProductBrand(${row.config_id},escape('${row.config_name}'));" class=num id="count_${row.config_id}" style="text-align: center;"></TD>
									<TD onclick="getProductBrand(${row.config_id},escape('${row.config_name}'));" class=price id="price_${row.config_id}" style="text-align: center;"></TD>
									<TD id="oper_${row.config_id}" style="text-align: center;"></TD>
								</TR>
							</TBODY>
						</TABLE>
						<I></I></li>
				</c:forEach>
				<li class="leftSubSel">
					<span class="item">其他1：</span>
					<TABLE border="1">
						<TBODY>
							<TR>
								<input type="hidden" name="config_id" value="-999" />
								<input type="hidden" name="product_id" id="id_-999" />
								<input type="hidden" name="config_name" value="其他1" />
								<TD onclick="getProductBrand(-999, '其他1');" class=name id="name_-999" style="text-align: center;"></TD>
								<TD onclick="getProductBrand(-999, '其他1');" class=num id="count_-999" style="text-align: center;"></TD>
								<TD onclick="getProductBrand(-999, '其他1');" class=price id="price_-999" style="text-align: center;"></TD>
								<TD id="oper_-999" style="text-align: center;"></TD>
							</TR>
						</TBODY>
					</TABLE>
				</li>
				<li class="leftSubSel">
					<span class="item">其他2：</span>
					<TABLE border="1">
						<TBODY>
							<TR>
								<input type="hidden" name="config_id" value="-1000" />
								<input type="hidden" name="product_id" id="id_-1000" />
								<input type="hidden" name="config_name" value="其他2" />
								<TD onclick="getProductBrand(-1000, '其他2');" class=name id="name_-1000" style="text-align: center;"></TD>
								<TD onclick="getProductBrand(-1000, '其他2');" class=num id="count_-1000" style="text-align: center;"></TD>
								<TD onclick="getProductBrand(-1000, '其他2');" class=price id="price_-1000" style="text-align: center;"></TD>
								<TD id="oper_-1000" style="text-align: center;"></TD>
							</TR>
						</TBODY>
					</TABLE>
				</li>
								<li class="leftSubSel">
					<span class="item">其他3：</span>
					<TABLE border="1">
						<TBODY>
							<TR>
								<input type="hidden" name="config_id" value="-1001" />
								<input type="hidden" name="product_id" id="id_-1001" />
								<input type="hidden" name="config_name" value="其他3" />
								<TD onclick="getProductBrand(-1001, '其他3');" class=name id="name_-1001" style="text-align: center;"></TD>
								<TD onclick="getProductBrand(-1001, '其他3');" class=num id="count_-1001" style="text-align: center;"></TD>
								<TD onclick="getProductBrand(-1001, '其他3');" class=price id="price_-1001" style="text-align: center;"></TD>
								<TD id="oper_-1001" style="text-align: center;"></TD>
							</TR>
						</TBODY>
					</TABLE>
				</li>
								<li class="leftSubSel">
					<span class="item">其他4：</span>
					<TABLE border="1">
						<TBODY>
							<TR>
								<input type="hidden" name="config_id" value="-1002" />
								<input type="hidden" name="product_id" id="id_-1002" />
								<input type="hidden" name="config_name" value="其他4" />
								<TD onclick="getProductBrand(-1002, '其他4');" class=name id="name_-1002" style="text-align: center;"></TD>
								<TD onclick="getProductBrand(-1002, '其他4');" class=num id="count_-1002" style="text-align: center;"></TD>
								<TD onclick="getProductBrand(-1002, '其他4');" class=price id="price_-1002" style="text-align: center;"></TD>
								<TD id="oper_-1002" style="text-align: center;"></TD>
							</TR>
						</TBODY>
					</TABLE>
				</li>
			</UL>
			<DIV class=price_total>
				<span class=tips>
					<EM>*</EM> 号为必选项 
					<STRONG>合计：
					<span class="price">&yen; <span id="allPriceTxt">0</span></span>
					</STRONG>
				</span>
			</DIV>
		</DIV>
		<DIV class=choose_area>
			<div id="type_name" class=choose_form_hd></div>
			<div id="type_list" class=choose_forms style="padding-left: 5px;"></div>
			<div><DL class=brand style="padding-left: 5px;"><div id="brand_list"></div></DL></div>
			<div><UL class="result_list"><div id="product_list">暂无产品！</div></UL></div>
		</DIV>
	</DIV>
	<div>
		<ul>
		<li>姓名：<input type="text" id="scheme_customer_name" name="scheme_customer_name" /></li>
		<li>&nbsp;&nbsp;&nbsp;&nbsp;手机：<input type="text" id="scheme_customer_mobile" name="scheme_customer_mobile" /></li>
		<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;QQ：<input type="text" id="scheme_customer_qq" name="scheme_customer_qq" /></li>
		</ul>
		<input type="submit" value="保存方案" style="height: 20px;width: 50px;"/>
		<input type="button" id="buy_btn" value="购买" style="height: 20px;width: 50px;"/>
	</div>
	</form>
</DIV>
</body>
</html>